<template>
  <div class="my_address_select">
    <van-sticky>
      <van-nav-bar title="收获地址" left-arrow @click-left="back" right-text="新增" @click-right="addInvoice" />
    </van-sticky>
    <div class="list">
      <van-radio-group v-model="form.invoiceId" icon-size="0.28rem">
        <div class="item row-between-center  van-hairline--bottom" v-for="(item,index) in dataList" :key="index">
          <van-radio :name="item.id"></van-radio>
          <div class="content">
            <p class="name">
              <span>{{item.realName}}</span>
              <span>{{item.cellPhone}}</span>
              <span>{{item.email}}</span>
            </p>
            <p class="number">{{item.address}}</p>
          </div>
          <van-icon name="edit" icon-size="0.28rem" @click="editInvoice(item)" />
        </div>
      </van-radio-group>
    </div>
    <div class="btn" @click="subInvoice">选择</div>
  </div>
</template>

<script>
import api from "api/api"
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      chosenAddressId: '1',
      dataList: [],
      form: {
        orderId: this.$route.params.id,
        invoiceId: ''
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    ...mapMutations(['UPDATA_ADDRESS']),
    getList () {
      api.addressList().then(res => {
        this.dataList = res.data.records
        this.UPDATA_ADDRESS(res.data.records)
      })
    },
    addInvoice () {
      this.$router.push('/addressAdd')
    },
    editInvoice (item) {
      this.$router.push(`/addressEdit/${item.id}`)
    },
    subInvoice () {
      if (!this.form.invoiceId) {
        this.$toast('请选择收获地址')
        return
      }
      var address = this.dataList.filter((res) => {
        return res.id == this.form.invoiceId
      })
      localStorage.setItem('address', JSON.stringify(address[0]))
      window.history.go(-1)
    },
    back () {
      window.history.go(-1)
    }
  }
}
</script>

<style lang="scss">
.my_address_select {
  min-height: 100vh;
  // background-color: #f5f5f5;
  text-align: left;
  .list {
    .item {
      padding: 0.3rem;
      background-color: #fff;
      .van-icon-edit {
        font-size: 0.36rem;
      }
      .content {
        padding: 0.1rem 0 0.1rem 0.3rem;
        flex: auto;
        .name {
          font-size: 0.24rem;
          span {
            margin-right: 0.2rem;
          }
        }
        .number {
          font-size: 0.24rem;
          margin: 0.23rem 0 0 0;
        }
        .price {
          font-size: 0.27rem;
          color: #ff344c;
        }
      }
    }
  }
  .mb_18 {
    margin-bottom: 0.18rem;
  }
  .mb_105 {
    margin-bottom: 1.05rem;
  }
  .btn {
    width: 6.9rem;
    line-height: 0.76rem;
    background: linear-gradient(
      96deg,
      rgba(72, 143, 240, 1),
      rgba(51, 130, 239, 1)
    );
    border-radius: 0.38rem;
    font-size: 0.36rem;
    color: #fff;
    margin: 0.9rem 0 0 0.3rem;
    text-align: center;
  }
}
</style>